<template lang="html">
  <div class="container content content-wage" v-loading="loading">
    <div class="wage-menu">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: 'meetingColumn' }">会议组管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{groupName ? groupName: '会议栏目管理'}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="wage-add">
      <el-button type="primary" @click.stop="addColumns">添加栏目</el-button>
      <el-table :data="blocks" style="width: 100%" class="wage-table">
        <el-table-column prop="columnName" label="栏目名称" width="180">
        </el-table-column>
        <el-table-column  label="状态" width="100">
          <template slot-scope="scope">
            <p>{{scope.row.status === -1 ? '禁用' : '启用'}}</p>
           </template>
        </el-table-column>
        <el-table-column prop="sequence" label="排序" width="70">  
        </el-table-column>
        <el-table-column label="管理员" width="240">
            <template slot-scope="scope">
               <el-tag
                v-for="item in scope.row.users"
                :key="item.username"
                type="info"
                @close="deleteAdmin(item)"
                closable>
                {{item.employeeName}}
              </el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="360">
          <template slot-scope="scope">
            <el-button @click="editModules(scope.row)" type="success" size="small">修改</el-button>
            <el-button @click="addAdminFun(scope.row)" type="success" size="small">管理员</el-button>
            <el-button @click="editMeetingUser(scope.row)" type="success" size="small">编辑人员</el-button>
            <el-button
                v-if="scope.row.status === 0"
              @click="disableGroupFun(scope.row)"
              type="danger"
              size="small"
              >禁用</el-button
            >
                     <el-button
              @click="enabledGroupFun(scope.row)"
              type="success"
              size="small"
              v-if="scope.row.status === -1"
              >启用</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="wage-add-pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="page"
          :page-size="pageSize"
          @current-change="loadMeetingGroup"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog :title="titleName" :visible.sync="dialogTableVisible">
        <column-add
        v-if="dialogTableVisible"
        :type="type"
        :groupId="id"
        :modules="modules"
        @hascreated="hascreated"
        @cancelAdd="cancelAddFun"
      >
      </column-add>
    </el-dialog>

     <el-dialog
      title="添加管理员"
      :visible.sync="dialogVisible"
      v-loading="dialogLading"
      :before-close="closeDialog"
      width="40%" >
      <div class="open-user">
          <el-select
            v-model="user"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键字搜索人员"
            :remote-method="searchUser"
            ref="elSelect"
            :loading="loading">
              <el-option
                v-for="item in users"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="编辑栏目授权范围" :close-on-click-modal="false" :visible.sync="meetingUserVisible" :before-close="userClear" class="meeting-add-dialog user-dialog">
      <meeting-user v-if="meetingUserVisible" :meeting='modules'   @hascreated="hascreated" :cls="cls" sourceType="column" ></meeting-user>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import axios from 'axios';
import storage from '@/assets/js/storage';
import {  createConfig } from '@/assets/js/tools';
//import util from '@/assets/js/util';
import ColumnAdd from '@/components/meetings/ColumnAdd'
import MeetingUser from '@/components/meetings/MeetingUser'
export default {
  name: 'meeting-group',
  data() {
    return {
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      serial: [],
      blocks: [],
      type: 'add',
      dialogTableVisible: false,
      orgSelectDialog: false,
      modules: {},
      trees: [],
      dialogVisible: false,
      dialogLading: false,
      user: "",
      users: [],
      selectUsers: [],
      groupName:'',
      id:'',
      meetingUserVisible: false,
      cls:'',
    };
  },
  components: {
    ColumnAdd,MeetingUser
  },
  computed: {
    ...mapGetters({
      userInfo: 'getUserInfo',
    }),
    titleName() {
      return this.type === 'add' ? '新增栏目' : '编辑栏目';
    },
  },
  methods: {
    userClear(){
      this.cls="change"
      this.meetingUserVisible=false;
    },
    editMeetingUser(meeting){
      this.modules = meeting
      this.meetingUserVisible=true
    },
    addColumns() {
      this.type = 'add';
      this.dialogTableVisible = true;
    },
    editModules(modules) {
      this.type = 'edit';
      this.modules = modules;
      this.dialogTableVisible = true;
    },
    hascreated() {
      this.dialogTableVisible = false;
      this.loadMeetingGroup();
    },
    cancelAddFun() {
      this.dialogTableVisible = false;
    },

    handleClick(row) {
      this.$router.push({
        path: 'card',
        query: row,
      });
    },
    deleteAdmin(admin){
          this.$confirm('是否删除该数据?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
        .then(() => {
            let path = '/station/api/meeting/group/deleteAdmin?id=' +  admin.id;
            let headers = { token: this.userInfo.token };
            axios
              .get(path, {
                params: {},
                headers: headers,
              })
              .then((data) => {
                if (data.data.status === 'SUCCESS') {
                  this.$message.success('删除成功');
                  this.loading = false;
                  this.loadMeetingGroup();
                } else {
                  this.$message.error('删除失败');
                }
                this.loading = false;
              })
              .catch((err) => {
                this.$message.error('删除失败');
                this.loading = false;
                // eslint-disable-next-line no-console
                console.log(err);
              });

        })
        .catch(() => {});
    },
    disableGroupFun(row) {
      this.$confirm('是否禁用该栏目?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.disableGroup(row);
        })
        .catch(() => {});
    },
    disableGroup(row) {
      this.loading = true;

      let path = '/station/api/meeting/column/disabledColumn?id=' + row.id + '&ts=' + Date.now();
      let headers = { token: this.userInfo.token };
      axios
        .get(path, {
          params: {},
          headers: headers,
        })
        .then((data) => {
          if (data.data.status === 'SUCCESS') {
            this.$message.success('禁用成功');
            this.loading = false;
            this.loadMeetingGroup();
          } else {
            this.$message.error(data.data.errorMsg? data.data.errorMsg : '禁用失败');
          }
          this.loading = false;
        })
        .catch((err) => {
          this.$message.error('禁用失败');
          this.loading = false;
          // eslint-disable-next-line no-console
          console.log(err);
        });
    },

    enabledGroupFun(row) {
      this.$confirm('是否启用该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.enabledGroup(row);
        })
        .catch(() => {});
    },
    enabledGroup(row) {
      this.loading = true;
      let path = '/station/api/meeting/column/enabledColumn?id=' + row.id + '&ts=' + Date.now();
      let headers = { token: this.userInfo.token };
      axios
        .get(path, {
          params: {},
          headers: headers,
        })
        .then((data) => {
          if (data.data.status === 'SUCCESS') {
            this.$message.success('启用成功');
            this.loading = false;
            this.loadMeetingGroup();
          } else {
            this.$message.error('启用失败');
          }
          this.loading = false;
        })
        .catch((err) => {
          this.$message.error('启用失败');
          this.loading = false;
          // eslint-disable-next-line no-console
          console.log(err);
        });
    },


    loadMeetingGroup() {
      this.loading = true;
      let param = {
        page: this.page - 1,
        pageSize: this.pageSize,
        groupId: this.id
      };
      let path = '/station/api/meeting/column/pageColumn?vs=' + Date.now();
      let config = createConfig(this.userInfo.token);
      axios
        .post(path, param, config)
        .then((data) => {
          if (data.data.status === 'SUCCESS') {
            let content = data.data.content;
            if (content && content.content && Array.isArray(content.content)) {
              this.blocks = content.content;
              this.total = content.totalElements;
            }
          } else {
            this.$message.error(
              data.data.errorMsg ? data.data.errorMsg : '获取分组出错'
            );
          }
          this.loading = false;
        })
        .catch((err) => {
          // eslint-disable-next-line no-console
          console.log(err);
          this.$message.error('获取分组出错');
          this.loading = false;
        });
    },
    addAdminFun(modules){
       this.modules = modules
       this.dialogVisible = true;
    },
    searchUser(query) {
      if (query !== "") {
        let path = "/station/api/searchUser";
        let param = { query: query.toLowerCase() };
        let headers = { token: this.userInfo.token };
        this.loading = true;
        axios
          .get(path, {
            params: param,
            headers: headers
          })
          .then(data => {
            let result = data.data;
            if (result.status === "SUCCESS") {
              if (result.content && result.content.length > 0) {
                result.content.forEach(item => {
                  item.label = item.name + "/" + item.username;
                  if (item.positions && item.positions.length > 0) {
                    let position = item.positions[0];
                    let job =
                      position.corp_name +
                        "/" +
                        position.org_name +
                        "/" +
                        position.job_title || "--";
                    item.label += "-" + job;
                  }
                  item.value = item.user_id;
                });
                this.users = result.content;
              }
            }
            this.loading = false;
          })
          .catch(error => {
            // eslint-disable-next-line no-console
            console.log(error);
            this.loading = false;
          });
      } else {
        this.users = [];
      }
    },
    closeDialog() {
      this.dialogVisible = false;
      this.users = []
      this.user = "";
    },
    addUser() {
      if (this.user) {
        this.saveUser();
      } else {
        this.$message("请先选择人员");
      }
    },
    saveUser() {
      this.dialogLading = true;
      let param = {
        columnId: this.modules.id,
        groupId: this.modules.groupId,
        userId: this.user
      };

      let path = "/station/api/meeting/column/saveColumnAdmin";
      let config = createConfig(this.userInfo.token);
      axios
        .post(path, param, config)
        .then(data => {
          if (data.data.status === "SUCCESS") {
            let userinfo = this.users.find(item => {
              return item.user_id === this.user;
            });
            this.selectUsers.push(userinfo);
            this.dialogVisible = false;
            this.user = "";
            this.users = [];
            this.loadMeetingGroup();
          } else {
            this.$message.error(
              data.data.errorMsg ? data.data.errorMsg : "添加管理员失败"
            );
          }
          this.dialogLading = false;
        })
        .catch(err => {
          // eslint-disable-next-line no-console
          console.log(err);
          this.$message.error("添加管理员失败");
          this.dialogLading = false;
        });
    },
    
  },
  mounted() {
    this.id = this.$route.query.id;
    this.groupName = this.$route.query.groupName;
    storage.initUserInfo();
    this.loadMeetingGroup();
  },
};
</script>

<style lang="scss" scoped>
.content-wage {
  padding: 90px 30px 30px 30px !important;
  .wage-menu {
    margin-bottom: 30px;
  }
  .wage-table {
    margin-top: 25px;
  }
  .wage-add-pagination {
    margin-top: 20px;
  }
}
.td-list-span {
    margin-right: 7px;
}
</style>
